<script setup lang="ts">
// typescript
</script>

<!-- 搜索商品卡片组件 -->
<template>
  <view class="w-components-container w-search-commodity-card">
    <navigator class="view" url="/pages/commodity-detail/commodity-detail?commodityId=1234">
      <view class="thumb">
        <image src="../../static/images/delete/goods/1.png"></image>
      </view>
      <view class="title-view ellipsis-2">
        <text>高端智能办公游戏大存储手机高端智能办公游戏大存储手机</text>
      </view>
    </navigator>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-search-commodity-card {
  padding: 20rpx 20rpx;
  background-color: $border-color;
  border-radius: 8px;

  .view {
    display: flex;
    align-items: center;
  }
}

.thumb {
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.title-view {
  flex: 1;
  font-size: 24rpx;
}
</style>